$line: 2rpx solid #f6f6f6; // 线
$height_button: var(--height_button);
$color_head: var(--font_color_d);
$color_sure: var(--color_green);
$color_cancel: var(--font_color_s);

.zj-dialog{ // 内容区
  width: 80%;
  border-radius: 20rpx;
  background-color: #fff;
  position: fixed;
  top: 50%; left: 50%;
  overflow: hidden;
  z-index: 10;
  transition: all .3s;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  &.animation{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  >view{ width: 100%; }
  .zj-dialog-head { // 头部
    border-bottom: $line;
    text-align: center;
    padding: 1em;
    font-size: 1.1em;
    color: $color_head;
  }
  .zj-dialog-body { // 内容区
    overflow: auto;
  }
  .zj-dialog-foot { // 底部
    height: $height_button;
    display: flex;
    justify-content: flex-end;
    border-top: $line;
    button {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 1em;
      font-size: 1.1em;
      font-weight: bold;
      border-left: $line;
      &:first-child{ border-left: 0; }
    }
    .sure { color: $color_sure; }
    .cancel { color: $color_cancel; }
  }
}
